import { ref, watch, h } from "vue";
import { FormItemComponentType, FormItemData } from "../../CURDDialog/models";
import { DispatchWorkOrderItem, ServiceState, ServiceType } from "/@/api/aiot/serviceApply/models";
import type { TableRecord } from "/@/api/models";
import SelectInput from "/@/components/common/SelectInput.vue";
import { useI18n } from "/@/locales/useI18n";
import { LabelSelectType, SelectItem } from "/@/types/components";
import { enumToOptions } from "/@/utils/common";
import dayjs, { Dayjs } from "dayjs";

export function useServiceApplyModal() {
  const { t } = useI18n();
  const disabledDate = (current: Dayjs) => {
    return current && current < dayjs().startOf("day");
  };
  const disabledDateBefore = (current: Dayjs) => {
    return current && current > dayjs().endOf("day");
  };
  const columns = ref<Array<TableRecord>>([
    {
      title: t("aiot.serviceApply.serviceOrderCode"),
      dataIndex: "serviceOrderCode",
      width: 100,
    },
    {
      title: t("aiot.serviceApply.serviceType"),
      dataIndex: "serviceType",
      width: 100,
    },
    {
      title: t("aiot.serviceApply.projectName"),
      dataIndex: "projectName",
      width: 100,
    },
    {
      title: t("aiot.serviceApply.contactsPerson"),
      dataIndex: "contactsPerson",
      width: 100,
    },
    {
      title: t("aiot.serviceApply.address"),
      dataIndex: "address",
      width: 100,
    },
    {
      title: t("aiot.serviceApply.applyTime"),
      dataIndex: "createdOn",
      width: 100,
      sorter: true,
    },
    {
      title: t("aiot.serviceApply.applyStatus"),
      dataIndex: "serviceState",
      width: 100,
    },
    {
      title: t("common.oper"),
      key: "oper",
      fixed: "right",
      width: 100,
    },
  ]);
  const dispatchModel = ref<DispatchWorkOrderItem>({
    operationUserName: "",
    helperUserName: "",
    operationUserId: "",
    helperUserIds: [],
    plannTime: "",
    opinion: "",
  });
  const chooseOperationUser = ref<boolean>(false);
  const selectUserMode = ref<"radio" | "checkbox">("radio");
  function handleSelectedUser({ userIds, selectedUsers }) {
    if (chooseOperationUser.value) {
      dispatchModel.value.operationUserId = userIds[0];
      dispatchModel.value.operationUserName = selectedUsers[0].userName;
    } else {
      dispatchModel.value.helperUserIds = userIds;
      dispatchModel.value.helperUserName = selectedUsers.map((item) => {
        return item.userName;
      });
    }
  }
  const chooseUserVisible = ref<boolean>(false);
  const dispatchModelFormSetting = ref<Array<FormItemData>>([
    {
      label: t("aiot.serviceApply.operationUser"),
      key: "operationUserName",
      required: true,
      props: {
        placeholder: t("common.pleaseSelect"),
      },
      customComponent: h(SelectInput, {
        onClick() {
          selectUserMode.value = "radio";
          chooseOperationUser.value = true;
          chooseUserVisible.value = true;
        },
      }),
    },
    {
      label: t("aiot.serviceApply.helperUser"),
      key: "helperUserName",
      props: {
        placeholder: t("common.pleaseSelect"),
      },
      // type: FormItemComponentType.TEXTAREA,
      customComponent: h(SelectInput, {
        onClick() {
          selectUserMode.value = "checkbox";
          chooseOperationUser.value = false;
          chooseUserVisible.value = true;
        },
      }),
    },
    {
      label: t("aiot.serviceApply.plannTime"),
      key: "plannTime",
      required: true,
      type: FormItemComponentType.DATEPICKER,
      props: {
        showTime: { format: "HH:mm" },
        format: t("common.dateTimeFormatStr1"),
        valueFormat: t("common.dateTimeFormatStr1"),
        disabledDate: disabledDate,
      },
    },
    {
      label: t("aiot.serviceApply.opinion"),
      key: "opinion",
      max: 256,
      props: {
        placeholder: t("common.pleaseInput"),
      },
      type: FormItemComponentType.TEXTAREA,
    },
    {
      key: "operationUserId",
      hide: true,
    },
    {
      key: "helperUserIds",
      hide: true,
    },
  ]);
  // WAITING:待接单;SERVICE:服务中;EVALUATED:待评价;FINISHED:已完成
  const selectData = ref<SelectItem[]>([
    {
      label: t("aiot.serviceApply.serviceType"),
      value: "",
      key: "serviceType",
      props: { allowClear: true },
      options: enumToOptions(ServiceType, "serviceType"),
    },
  ]);
  return {
    selectUserMode,
    handleSelectedUser,
    selectData,
    chooseUserVisible,
    columns,
    dispatchModel,
    dispatchModelFormSetting,
  };
}
